<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layout :: common_head(~{::title})">
	<title>Invoicing</title>
</head>

<body th:replace="layout :: common_body(~{::h1},~{::#content})">
	<h1>Invoicing</h1>
	<div id="content" class="container">

		<div class="snippet">
			<div class="row">
				<div class="col-md-2">
					<b>Customer</b>
				</div>
				<div class="col-md-2" th:text="${invoice.customer.firstname}+' '+${invoice.customer.name}"></div>
				<div class="col-md-2" th:text="${invoice.customer.email}"></div>
			</div>

			<div class="row">
				<h2>Billing Address</h2>
			</div>

			<div class="row">
				<div class="col-md-2">
					<b>Street</b>
				</div>
				<div class="col-md-2" th:text="${invoice.billingAddress.street}"></div>
			</div>
			<div class="row">
				<div class="col-md-2">
					<b>Zip</b>
				</div>
				<div class="col-md-2" th:text="${invoice.billingAddress.zip}"></div>
			</div>
			<div class="row">
				<div class="col-md-2">
					<b>City</b>
				</div>
				<div class="col-md-2" th:text="${invoice.billingAddress.city}"></div>
			</div>

			<div class="row">
				<h2>Invoice Lines</h2>
			</div>

			<div class="row">
				<div class="col-md-2">
					<b>Quantity</b>
				</div>
				<div class="col-md-2">
					<b>Item</b>
				</div>
				<div class="col-md-2">
					<b>Name</b>
				</div>
				<div class="col-md-2">
					<b>Price</b>
				</div>
				<div class="col-md-2">
					<b>Total Price</b>
				</div>
			</div>

			<div class="row" th:each="invoiceLine : ${invoice.invoiceLine}">
				<div class="col-md-2" th:text="${invoiceLine.count}"></div>
				<div class="col-md-2" th:text="${invoiceLine.item.itemId}"></div>
				<div class="col-md-2" th:text="${invoiceLine.item.name}"></div>
				<div class="col-md-2" th:text="${invoiceLine.item.price}"></div>
				<div class="col-md-2" th:text="${invoiceLine.totalAmount()}"></div>
			</div>

		</div>

		<div class="row">
			<h2>More Information</h2>
		</div>

		<div class="row">
			<div class="col-md-2"><a href="/order/42" th:href="'/order/'+${invoice.id}">Order</a></a></div>
			<div class="col-md-2"><a href="/shipping/42" th:href="'/shipping/'+${invoice.id}">Shipping</a></a></div>
		</div>

	</div>
</body>

</html>